<!-- 景点轮播图组件 -->
<template>
  <div class="carousel-container">
    <!-- 背景图片 -->
    <div class="background-image" :style="{ backgroundImage: `url(${images[currentIndex]})` }"></div>
    <!-- 前景图片容器 -->
    <div class="foreground-container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
      <transition name="fade">
        <img :key="currentIndex" :src="images[currentIndex]" class="foreground-image" />
      </transition>
      <!-- 导航控件，仅在鼠标悬停时显示 -->
      <div class="navigation" v-show="isHovered">
        <div class="arrows">
          <button class="left" @click="prev">←</button>
          <button class="right" @click="next">→</button>
        </div>
        <div class="dots">
          <span
            v-for="(image, index) in images"
            :key="index"
            @click="goTo(index)"
            :class="{ active: index === currentIndex }"
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片URL数组，实际使用时请替换为真实图片路径
      images: [
        'https://via.placeholder.com/1280x280?text=Image+1',
        'https://via.placeholder.com/1280x280?text=Image+2',
        'https://via.placeholder.com/1280x280?text=Image+3',
      ],
      currentIndex: 0, // 当前显示的图片索引
      isHovered: false, // 是否鼠标悬停
      autoPlayInterval: null, // 自动轮播定时器
    };
  },
  mounted() {
    this.startAutoPlay(); // 组件挂载时启动自动轮播
  },
  beforeUnmount() {
    this.stopAutoPlay(); // 组件销毁前停止自动轮播
  },
  methods: {
    // 启动自动轮播
    startAutoPlay() {
      this.autoPlayInterval = setInterval(() => {
        this.next();
      }, 3000); // 每3秒切换一次
    },
    // 停止自动轮播
    stopAutoPlay() {
      clearInterval(this.autoPlayInterval);
    },
    // 下一张图片
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    },
    // 上一张图片
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    },
    // 跳转到指定图片
    goTo(index) {
      this.currentIndex = index;
    },
    // 鼠标进入时暂停轮播并显示导航
    handleMouseEnter() {
      this.isHovered = true;
      this.stopAutoPlay();
    },
    // 鼠标离开时恢复轮播并隐藏导航
    handleMouseLeave() {
      this.isHovered = false;
      this.startAutoPlay();
    },
  },
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

.carousel-container {
  position: relative;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  background-color: rgba(15, 41, 77, 0.4);
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center bottom;
  /* 背景图片平滑切换效果 */
  transition: background-image 0.5s ease-in-out;
}


.foreground-container {
  position: relative;
  width: 60vw; 
  height: 40vh;
  border-radius: 16px 16px 0px 0px;
}

.foreground-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  border-radius: 16px 16px 0px 0px;
}

.navigation {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 圆形导航箭头样式 */
.arrows button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.arrows button:hover {
  background-color: rgba(255, 255, 255, 0.75);
}

.arrows button.left {
  left: 20px;
}

.arrows button.right {
  right: 20px;
}

.arrow-icon {
  width: 24px;
  height: 24px;
  color: #333;
  font-size: 24px;
}

/* 导航圆点样式 */
.dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dots span {
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.dots span.active {
  background: #333;
}
</style>
